<!--<link rel="stylesheet" href="{{base_url()}}syslib/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.selection.js"></script>	
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.filter.js"></script>		
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxdata.js"></script>	
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxlistbox.js"></script>	
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/gettheme.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/globalization/jquery.global.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxnumberinput.js"></script>-->
{{$controller = $smarty.const.CCTRL}}
{{$token = $smarty.const.TOKEN}}
{{$display=$Data["display"]}}
{{$colModel=$Data["colModel"]}}
{{if isset($Data["pageSize"])}}
    {{$pageSize=$Data["pageSize"]}}
{{/if}}
{{foreach $colModel as $col}}
    {{if $col|is_array}}
        {{$column["text"]=$col["text"]}}
        {{$column["datafield"]=$col["datafield"]}}
        {{if isset($col["cellsalign"])}}
            {{$column["cellsalign"]=$col["cellsalign"]}}
        {{/if}}
        {{if isset($col["editable"])}}
            {{$column["editable"]=$col["editable"]}}
        {{else}}
            {{$column["editable"]=false}}
        {{/if}}
        {{if isset($col["filtertype"])}}
            {{$column["filtertype"]=$col["filtertype"]}}
        {{/if}}
        {{if isset($col["filterable"])}}
            {{$column["filterable"]=$col["filterable"]}}
        {{else}}
            {{$column["filterable"]=true}}
        {{/if}}
        {{if isset($col["filteritems"])}}
            {{$column["filteritems"]=$col["filteritems"]}}
        {{/if}}
        {{if isset($col["sortable"])}}
            {{$column["sortable"]=$col["sortable"]}}
        {{else}}
            {{$column["sortable"]=true}}
        {{/if}}
        {{if isset($col["columntype"])}}
            {{$column["columntype"]=$col["columntype"]}}
        {{/if}}
        {{if isset($col["threestatecheckbox"])}}
            {{$column["threestatecheckbox"]=$col["threestatecheckbox"]}}
        {{/if}}
        {{if isset($col["cellsformat"])}}
            {{$column["cellsformat"]=$col["cellsformat"]}}
        {{/if}}
        {{if isset($col["hidden"])}}
            {{$column["hidden"]=$col["hidden"]}}
        {{/if}}
        {{if isset($col["width"])}}
            {{$column["width"]=$col["width"]}}
            {{$column["minwidth"]=$col["width"]}}
        {{else}}
            {{$column["minwidth"]=100}}
        {{/if}}
        {{$columns[$col["datafield"]]=$column}}
        {{$column=[]}}
        {{$datafield["name"]=$col["datafield"]}}
        {{if isset($col["type"])}}
            {{$datafield["type"]=$col["type"]}}
        {{else}}
            {{$datafield["type"]="string"}}
        {{/if}}
        {{$listitem["label"]=$col["text"]}}
        {{$listitem['value']=$col["datafield"]}}
        {{if isset($col["hidden"])}}
            {{$listitem["checked"]=!$col["hidden"]}}
        {{else}}
            {{$listitem["checked"]=true}}
        {{/if}}
        {{$listitems[]=$listitem}}
        {{$listitem=[]}}
    {{else}}
        {{$column["text"]=$col}}
        {{$column["datafield"]=$col}}
        {{$column["editable"]=false}}
        {{$datafield["type"]="string"}}
        {{$columns[$col]=$column}}
        {{$column=[]}}
        {{$datafield["name"]=$col}}
        {{$listitem["label"]=$col}}
        {{$listitem['value']=$col}}
        {{$listitem["checked"]=true}}
        {{$listitems[]=$listitem}}
        {{$listitem=[]}}
    {{/if}}
    {{$datafields[]=$datafield}}
    {{$datafield=[]}}
{{/foreach}}

{{if isset($loadMyMenu)}}
    {{include file="../"|cat:$controller|cat:"/jqxmenu.tpl"}}
{{else}}
    {{include file="../00_base/jqxmenu.tpl"}}
{{/if}}
{{include file="../00_base/jqxgridsetting.tpl"}}
{{include file="../"|cat:$controller|cat:"/handleevent.tpl"}}
<div class="pr2 frmjqxgrid" style="min-height: 500px">
    <div id="jqxGrid"></div>
</div>
<div class="frmeditting hidden">Loadding...</div>
{{if isset($loadMyMenu)}}
    {{include file="../"|cat:$controller|cat:"/jqxmenu.tpl"}}
{{else}}
    {{include file="../00_base/jqxmenu.tpl"}}
{{/if}}

<script type="text/javascript">
    var myjqxGrid= (function () {
        var myGrid=$("#jqxGrid");
        var theme=getTheme();
        var source ={
            datatype: "json",
            type        :   "POST",
            datafields  : {{json_encode($datafields)}},
            url         : '{{base_url()}}backend/{{$controller}}/binding/',
            filter      : function(){ 
                myGrid.jqxGrid('updatebounddata', 'filter') 
            },
            sort        : function(){ 
                myGrid.jqxGrid('updatebounddata') 
            },
            root        : 'Rows',
            beforeprocessing: function(data){		
                    source.totalrecords = data[0].TotalRows;					
            }
        };	
        var dataadapter = new $.jqx.dataAdapter(source, {
            loadError: function(xhr, status, error){
                tipMessage("<b>Status</b>:"+xhr.status+"<br/><b>ThrownError</b>:"+error+"<br/>");
            }
        });
        var columns={{json_encode($columns)}};
        columns=jqxFixColumns(columns);
        //Adding event listeners
        function _addEventListeners() {
            
        };
        //Creating all page elements which are jqxWidgets
        function _createElements() {

        };
        //Creating the demo window
        function _createWindow() {
            $("#window-sOpt").jqxWindow({
                autoOpen: false,showCollapseButton: true, maxHeight: 400, maxWidth: 700, 
                minHeight: 100, minWidth: 200, width: 420, theme: theme 
            });
        };
        function _createGrid(){
            try{
            var gridconfig={
                width:'100%',
                
                //autoheight: true,
                //rowsheight: 24,
                source: dataadapter,
                theme: theme,
                sortable: true,
                ready: function () {
                    
                },
                rendergridrows: function(obj)
                {
                    return obj.data;    
                },
                
                groupable:true,
                filterable: true,
                autoshowfiltericon: true,
                showfilterrow: true,
                editable:true,
                editmode:'dblclick',
                selectionmode:'multiplerowsextended',
                height:'500',
                virtualmode: true,
                columns: columns
            };
            {{if isset($pageSize)}}
                gridconfig.pageable =    true;
                gridconfig.pagesize =    {{$pageSize}};
                gridconfig.pagesizeoptions  =   ['50','100', '200', '500' , '1000'];
                gridconfig.pageable=true;
            {{else}}
                gridconfig.groupable =    false;
                gridconfig.filterable =    false;
                gridconfig.showfilterrow =    false;
            {{/if}}
            myGrid.jqxGrid(gridconfig);
            handleEvent_jqxGrid(myGrid);
            }catch(e){ tipMessage(e.message); }
        }
        return {
            Init:function(){
                _createGrid();
            },
            Setting:function(){
                var tit="<img class='pa t7 l8 ico16'src='{{base_url()}}syslib/sysimages/16/option.gif'/><font class='pl20'>Settings !</font>";
                ShowDialogMessage($("#window-sOpt"),tit);
            },
            Refresh:function(){
                console.log("Refresh ↵ Call");
                myGrid.jqxGrid('updatebounddata');
            },
            DisplayChange:function(v){
                try{
                    if(isrunning)return;
                    isrunning=true;
                    var url=baseurl+"backend/fe548e5a964095e7c80cd8d3721be2ef/ChangeDeleteDisplay/{{$controller}}";
                    var data={
                        showDelete  :   v
                    };
                    myAjax(url,data,function(result){
                        isrunning=false;
                        if(result.code>=0){
                            myGrid.jqxGrid('gotopage', 0);
                            myjqxGrid.Refresh();
                        }else{
                            tipMessage(result.msg);
                        }
                    });
                }catch(e){
                    console.log("JSON Error:"+e.message+"\n↵ Error");
                    tipMessage(e.message);
                    //ShowErrorDialogMessage("Sorry. Your request could not be completed.<br/> Please check your input data.");
                }
            },
            DisplayColumnChange:function(col,hide){
                try{
                    if(isrunning)return;
                    isrunning=true;
                    var url=baseurl+"backend/fe548e5a964095e7c80cd8d3721be2ef/ChangeColumnDisplay/{{$controller}}";
                    var data={
                        col:col,
                        hide  :   hide
                    };
                    myAjax(url,data,function(result){
                        isrunning=false;
                        if(result.code>=0){
                            //FlexiGrid.Refresh();
                        }else{
                            tipMessage(result.msg);
                        }
                    });
                }catch(e){
                    console.log("JSON Error:"+e.message+"\n↵ Error");
                    tipMessage(e.message);
                    //ShowErrorDialogMessage("Sorry. Your request could not be completed.<br/> Please check your input data.");
                }
            },
            ShowColumn:function(col){
                console.log("Hide column: "+col+" ↵ Call");
                myGrid.jqxGrid('hidecolumn', col);
                myjqxGrid.DisplayColumnChange(col,1);
            },
            HideColumn:function(col){
                console.log("Show column: "+col+" ↵ Call");
                myGrid.jqxGrid('showcolumn', col);
                myjqxGrid.DisplayColumnChange(col,0);
            },
            StatusChange:function(ID,Status){
                try{
                    console.log("ChangeStatus:\nID:"+ID+"\tStatus:"+Status+" ↵ Call");
                    var url,data;
                    url="{{base_url()}}backend/fe548e5a964095e7c80cd8d3721be2ef/ChangeStatus/{{$token}}/{{$controller}}";
                    data={
                        ID      :   ID,
                        Status  :   Status
                    }
                    isrunning=true;
                    myAjax(url,data,function(result){
                        isrunning=false;
                        if(result.code>=0){
                            tipMessage(result.msg);
                        }else{
                            tipMessage(result.msg);
                        }
                    });
                }catch(e){
                    console.log("JSON Error:"+e.message+"\n↵ Error");
                    tipMessage(e.message);
                    //ShowErrorDialogMessage("Sorry. Your request could not be completed.<br/> Please check your input data.");
                }
            },
            AddItem:function(){
                try{
                    console.log("AddItem ↵ Call");
                    var url,data,obj,id;
                    url="{{base_url()}}backend/{{$controller}}/edit";
                    data={ }
                    obj=$(".frmeditting");
                    isrunning=true;
                    obj.html("<div style='display:block;margin:0 auto;width:60px;height:60px' class='ajaxloadding'></div>");
                    htmlAjax(url,data,obj,function(){
                        {{if isset($isPopup)}}
                            ShowConfirmDialogMessage(obj, "Thêm mới.", SaveItem);
                        {{else}}
                            $(".frmjqxgrid").hide();
                            $(".frmeditting").show();
                            $(".group-events.g").hide();
                            $(".group-events.e").show();
                        {{/if}}
                    });
                    
                }catch(e){
                    console.log("JSON Error:"+e.message+"\n↵ Error");
                    ShowErrorDialogMessage(e.message);
                    //ShowErrorDialogMessage("Sorry. Your request could not be completed.<br/> Please check your input data.");
                }
            },
            EditItem:function(){
                try{
                    var rowindexes = myGrid.jqxGrid('getselectedrowindexes');
                    if(rowindexes.length!=1){
                        tipMessage("Vui lòng chọn một dòng.");
                        return;
                    }
                    var rowData=myGrid.jqxGrid('getrowdata', rowindexes[0]);
                    var url,data,obj,_id;
                    _id=rowData._id;
                    console.log("EditItem:"+_id+" ↵ Call");
                    url="{{base_url()}}backend/{{$controller}}/edit/"+_id;
                    data={ }
                    obj=$(".frmeditting");
                    if(_id != $("#_id").val()){
                        isrunning=true;
                        obj.html("<div style='display:block;min-width:60px;height:60px' class='ajaxloadding'></div>");
                        htmlAjax(url,data,obj,function(){
                            {{if isset($isPopup)}}
                                ShowConfirmDialogMessage(obj, "Edit record", SaveItem);
                            {{else}}
                                $(".frmjqxgrid").hide();
                                $(".frmeditting").show();
                                $(".group-events.g").hide();
                                $(".group-events.e").show();
                            {{/if}}
                        });
                    }else{
						{{if isset($isPopup)}}
							ShowConfirmDialogMessage(obj, "Edit record", SaveItem);
						{{else}}
							$(".frmjqxgrid").hide();
							$(".frmeditting").show();
							$(".group-events.g").hide();
							$(".group-events.e").show();
						{{/if}}
					}
                }catch(e){
                    console.log("JSON Error:"+e.message+"\n↵ Error");
                    ShowErrorDialogMessage(e.message);
                    //ShowErrorDialogMessage("Sorry. Your request could not be completed.<br/> Please check your input data.");
                }
            },
            CancelEdit:function(){
                console.log("CancelEdit ↵ Call");
                {{if isset($isPopup)}}
                    var confirm=$(".frmeditting");
                    CloseConfirmDialogMessage(confirm);
                {{else}}
                    $(".frmjqxgrid").show();
                    $(".frmeditting").hide();
                    $(".group-events.g").show();
                    $(".group-events.e").hide();
                {{/if}}
            }
        }
    } ());
    
    function removeEditorContent(ElementID){
    }
    
    $(document).ready(function () {
        myjqxGrid.Init();
        window.onbeforeunload = function(){
            return "Are you sure you want to leave?";
        };
    });
</script>
<style>
    #jqxGrid,#jqxGrid *{
        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        border-radius: 0px !important;
        font-family: tahoma;
        font-size: 11px;
    }
    .jqx-widget-content,.jqx-calendar-footer{
        font-family: tahoma;font-size: 11px;line-height: 16px
    }
</style>
<div class="jfk-bubble jfk-bubble-promo grayc jqxwidget hidden" 
        style="left: 200px;top: 36px; opacity: 1; position: fixed">
    <div class="jfk-bubble-closebtn giftnotice btn" onclick="$('.jqxwidget').hide('500');" style=""></div>
    <div class="jfk-bubble-content-id">
        <div class="promo-content" style="">
            <a href="http://www.jqwidgets.com" target="_blank">
                <img style="background: #000" src="http://www.jqwidgets.com/wp-admin/images/logo_bw.png"/>
            </a>
            <p>
                Website có sử dụng bộ control jqxWidget.
            </p>
        </div>
    </div>
    <div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 132px">
        <div class="jfk-bubble-arrowimplbefore"></div>
        <div class="jfk-bubble-arrowimplafter"></div>
    </div>
</div>